<template>
	<!-- 提现页面 -->
	<view class="invest">
		<view class="wallet-f">
			<view class="tip">
				当前鲸币余额
			</view>
			<view class="surplus">
				{{coinAmount}}
			</view>
			<view class="change-tip">
				兑换比例:1元=100鲸币，提现到账可能会有延迟
			</view>
		</view>
		
		<view class="invest-act">
			<view class="tip">
				<image src="/static/images/icon/wechat_icon.png" mode="aspectFill"></image>
				<view class="icon-tip">微信支付</view>
			</view>
			<view class="selections">
				<view class="select-item" :class="isActive == index ? 'addclass':''" v-for="(item,index) in list" :key="index" @tap="select(index)">
					{{item.money}}元
				</view> 
				<!-- <view class="select-item"  :class="isfocus? 'addclass':''">
					<input type="number" id="test" style="padding: 0 20rpx;" v-model="val" placeholder="自定义" @focus="focus" @blur="blur"/>
				</view> -->
			</view>
		</view>
		<view class="create">
			<button class="report" form-type="submit" @tap.stop="withdraw">立即提现</button>
		</view>
	</view>
</template>

<script>
	
	import api from '../../../common/api.js'
	
	export default {
		data() {
			return {
				isActive:0,						//选中项
				val:'',								//自定义金额
				isfocus:false,				//判断自定义金额输入框是否聚焦
				list:[{money:0.5},{money:2},{money:15},{money:30}]  ,//预设充值金额
				coinAmount:'',				//用户当前鲸币数量
			}
		},
		
		computed:{
			tipCount() {//选中项提示
				this.val = ''
				return this.list[this.isActive].money
			}
		},
		
		async onShow() {
			this.coinAmount = await api.GetCheckCoin()
		},
		
		methods:{
			
			select(index) {//切换预选项
				this.isActive = index
			},
			
			focus() {//金额输入框焦点
				this.isfocus = true
				this.isActive = 99
			},	
			
			blur() {//金额输入框失去焦点
				this.isfocus = false
			},
			
			async withdraw() {
				var _that = this
				if(this.list[this.isActive].money * 100 <= this.coinAmount) {
					uni.showModal({
						title: '提示',
						content: '确认提现',
						success: async function(res) {
							if (res.confirm) {
							  let res = await api.withdraw(_that.list[_that.isActive].money * 100)
							  if(res.err == 0) {
							  	uni.showToast({
							  		title:'申请提现成功，提现金额将在七个工作日内到账',
							  		icon:'none',
							  	})
							  	_that.coinAmount = await api.GetCheckCoin()
							  }else {
							  	uni.showToast({
							  		title:res.msg,
							  		icon:'none'
							  	})
							  }
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					
					
				}else {
					uni.showToast({
						title:'鲸币余额不足',
						icon:'none'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.wallet-f {
	padding:40rpx 20rpx 20rpx;
	border-bottom: 30rpx solid #f3f3f3;
	.tip {
		text-align: center;
		font-size: 30rpx;
		color: #9599b8;
		line-height: 40rpx;
	}
	.surplus {
		font-size: 52rpx;
		width: 710rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-weight: 600;
		color: #fc2a53;
		border-bottom: 1rpx solid #f1f1f1;
	}
	.change-tip {
		width: 660rpx;
		padding: 20rpx 10rpx 0;
		font-size: 30rpx;
		line-height: 50rpx;
		color: #ababab;
	}
}
.invest-act {
	margin: 30rpx 0 0 0;
	padding:30rpx 20rpx;
	.tip {
		display: flex;
		align-items: center;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
}
.create {
	position: fixed;
	height: 150rpx;
	width: 750rpx;
	z-index: 99;
	bottom: 0;
	background-color: #fff;
}
.report {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	left: 0;
	right: 0;
	border-radius: 60rpx;
	text-align: center;
	line-height: 82rpx;
	color: #FFFFFF;
	border-radius: 60rpx;
	background-color: #0690ff;
}
.selections {
	display: flex;
	flex-wrap: wrap;
	padding: 40rpx ;
	height: 240rpx;
	justify-content: space-between;
}
.select-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	width: 180rpx;
	height: 95rpx;
	color: #3f3f3f;
	border: 2rpx solid #e9e9e9;
}
.active {
	border: 1rpx solid #88b8ff;
}
.addclass {
	border: 1rpx solid #068fff;
	color: #068fff;
}
</style>
